<!DOCTYPE html>
<html>
<head>
    <title>订单统计</title>
    #parse("sys/header.html")
    <script src="${rc.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>

    <script src="${rc.contextPath}/js/highcharts/oldie.js?_${date.systemTime}"></script>
    <script src="${rc.contextPath}/js/highcharts/series-label.js?_${date.systemTime}"></script>
    <script src="${rc.contextPath}/js/highcharts/exporting.js?_${date.systemTime}"></script>
    <script src="${rc.contextPath}/js/highcharts/highcharts-zh_CN.js?_${date.systemTime}"></script>
        <style>
        .databox .dtitle .tab span {
            cursor: pointer;
            text-align: center;
        }

        .databox .dtitle span.on {
            border-bottom: 3px solid #4c8ced;
            color: #4c8ced;
        }

        .databox .dtitle span {
            color: #666;
            display: inline-block;
            height: 47px;
            line-height: 47px;
            margin-left: 4px;
            width: 100px;
        }

        .databox .dtitle .datefilter {
            float: right;
            margin: 10px 20px 0 0;
        }

        .databox .dtitle .datefilter b {
            color: #666;
            cursor: pointer;
            display: inline-block;
            font-weight: normal;
            margin: 5px 0 0 20px;
        }

        .databox .dtitle .datefilter b.on {
            color: #4c8ced;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <div class="form-group col-sm-2" style="width: 200px">
                <input id="orderdateBegin" name="orderdateBegin" type="text" class="form-control"
                       onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd',maxDate:'#F{$dp.$D(\'orderdateEnd\')||\'2120-10-01\'}'})" placeholder="开始时间">
            </div>
            <div class="form-group col-sm-2" style="width: 200px">
                <input id="orderdateEnd" name="orderdateEnd" class="form-control"
                       onClick="WdatePicker({minDate:'#F{$dp.$D(\'orderdateBegin\')}',el:this,dateFmt:'yyyy-MM-dd',maxDate:'2120-10-01'})" placeholder="结束时间">
            </div>
            <a class="btn btn-default" @click="query">查询</a>
            <a class="btn btn-default" @click="exportDate">收款员交易数据导出</a>
        </div>

        <div id="jqGridPager" class="databox" style="text-align: left">
            <div class="dtitle">
                <div class="datefilter">
                    <b id="mch_latelySeven" class="on">最近7天</b><b id="mch_latelyThirty">最近30天</b>
                </div>
                <div class="tab" id="tabDiv" style="float: left;">
                    <span id="mch_tansactionAmount" class="on" onclick="changeLine(1,this);">交易金额</span>
                    <span id="mch_tansactionPen" class="" onclick="changeLine(2,this);">交易笔数</span>
                    <span id="mch_refundAmount" class="" onclick="changeLine(3,this);">退款金额</span>
                    <span id="mch_refundPen" class="" onclick="changeLine(4,this);">退款笔数</span>
                    <span id="mch_personalAmount" class="" onclick="changeLine(5,this);">各收款员交易</span>
                </div>
            </div>
            <div class="chart_wrap" style="clear: left">
                <div class="chart_con">
                    <div id="containerCS" class="container" style="width:95%;height:40%;text-align: center"></div>
                    <div id="containerZZ" class="container" style="width:95%;height:40%;text-align: center"></div>
                    <div id="containerSX" class="container" style="width:95%;height:40%;text-align: center"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var type = 1;days=-6

    var vm = new Vue({
        el: '#rrapp',
        data: {
            showList: true,
            title: null,
            payorder: {}
        },
        methods: {
            query: function () {
                var orderdateBegin=$("#orderdateBegin").val();
                var orderdateEnd=$("#orderdateEnd").val();
                if(orderdateBegin==null||orderdateEnd==null||orderdateBegin==""||orderdateEnd==""){
                    alert("请选择时间段");
                }else{
                    days=1;
                    onloadSeries(1);
                }
            },exportDate: function () {
                var orderdateBegin=$("#orderdateBegin").val();
                var orderdateEnd=$("#orderdateEnd").val();
                window.location.href="${rc.contextPath}/payorder/exportDate?day="+days+"&orderdateBegin="+orderdateBegin+"&orderdateEnd="+orderdateEnd;
            },
            reload: function (event) {}
        }
    });



    Highcharts.setOptions({
        credits: {
            text: ''
        }
    });
    var chart = Highcharts.chart('containerCS', {
        chart: {
            type: 'line'
        }, subtitle: {
            text: ''
        }, legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        }, yAxis: {
            title: {
                text: ''
            }, labels: {
                formatter: function () {
                    return this.value;
                }
            }
        }, plotOptions: {
            line: {
                dataLabels: {
                    enabled: true          // 开启数据标签
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        }
    });
    var chartBar = Highcharts.chart('containerZZ', {
        chart: {
            type: 'column'
        }, subtitle: {
            text: ''
        }, legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        }, yAxis: {
            title: {
                text: ''
            }, labels: {
                formatter: function () {
                    return this.value;
                }
            }
        }, plotOptions: {
            line: {
                dataLabels: {
                    enabled: true          // 开启数据标签
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        }
    });
    var chartPie = Highcharts.chart('containerSX', {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        }, legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        tooltip: {
            headerFormat: '',
            pointFormat: '{point.name}<br>百分比: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true
                },
                showInLegend: true
            }
        }
    });


    //柱状图切换
    function changeChart(typ) {
        chart.update({
            chart: {
                type: $(typ).val()
            }
        });
    }

    function onloadSeries(day) {
        var seriesLength = chart.series.length;
        var seriesBarLength = chartBar.series.length;
        var chartPieLength = chartPie.series.length;
        for (var ii = 0; ii < seriesLength; ii++) {
            chart.series[0].remove();
        }
        for (var ii = 0; ii < seriesBarLength; ii++) {
            chartBar.series[0].remove();
        }
        for (var ii = 0; ii < chartPieLength; ii++) {
            chartPie.series[0].remove();
        }
        var orderdateBegin=$("#orderdateBegin").val();
        var orderdateEnd=$("#orderdateEnd").val();
        $.ajax({
            type: "POST",
            url: "../payorder/orderCensus?day=" + day + "&type=" + type+"&orderdateBegin="+orderdateBegin+"&orderdateEnd="+orderdateEnd,
            datatype: "json",
            success: function (dat) {
                if (dat.code == 0) {
                    for (var i = 0; i < dat.mapchart.series.length; i++) {
                        chart.addSeries({
                            name: '',
                            data: [null, null, null, null, null, null, null, null]
                        });
                        chartBar.addSeries({
                            name: '',
                            data: [null, null, null, null, null, null, null, null]
                        });
                    }
                    chart.update({
                        title: dat.mapchart.title,
                        xAxis: dat.mapchart.xAxis,
                        series: dat.mapchart.series
                    });
                    chartBar.update({
                        title: dat.mapchart.title,
                        xAxis: dat.mapchart.xAxis,
                        series: dat.mapchart.series
                    });
                    for (var i = 0; i < dat.mapchart.pieSeries.length; i++) {
                        chartPie.addSeries({
                            type: 'pie',
                            name: '',
                            data: [[null, null]]
                        });
                    }
                    chartPie.update({
                        title: dat.mapchart.title,
                        series: dat.mapchart.pieSeries
                    });
                }
            }
        });
    }

    onloadSeries(days);//进入页面加载数据（交易金额）
    $('#mch_latelySeven').click(function () { ///7天交易数据
        days=-6;
        onloadSeries(-6);
        $("#mch_latelySeven").addClass("on");
        $("#mch_latelyThirty").removeClass("on");
    });
    $('#mch_latelyThirty').click(function () { ///30天交易数据
        days=-29;
        onloadSeries(-29);
        $("#mch_latelyThirty").addClass("on");
        $("#mch_latelySeven").removeClass("on");
    });


    function changeLine(typ, tis) {
        type = typ;
        onloadSeries(days);
        $("#tabDiv span").removeClass("on");
        $(tis).addClass("on");
        $("#mch_latelySeven").addClass("on");
        $("#mch_latelyThirty").removeClass("on");
    }
</script>
</body>
</html>